<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        a {
            position: relative;
            display: inline-block;
            padding: 1.0em 1.2em;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            user-select: none;
            color: rgb(93, 234, 246);
            text-align: center;
        }

        <style>* {
             margin: 0;
             padding: 0;
         }

        canvas {
            background: url("../img/2.jpg") no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .controller {
            position: absolute;
            top: 200px;
            left: 700px;
            background-color: rgb(255, 255, 255, 0.3);
            border-radius: 10px 10px;
            padding: 30px 50px 20px;
            color: #00FFFF;
        }
        .btn {
            height: 30px;
            width: 80px;
            background-color: rgb(93, 234, 246);
        }

        input {
            border-radius: 12px;
            margin-bottom: 15px;
            background-color: transparent;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
    <img src="../img/9922720e0cf3d7cad43c87ecf71fbe096a63a966.jpg" height="100%" width="100%" style="left:0; top:0;">
</div>

<canvas id="canvas"> </canvas>
<script type="text/javascript">
    /**
     * 定义<canvas>画布;
     * @type {[type]}
     */
    var width = window.innerWidth; //获取系统显示宽度;
    var height = window.innerHeight; //获取系统显示高度;
    var canvas = document.querySelector("#canvas");
    var context = canvas.getContext("2d");
    var snowArray = []; //声明一个数组，用于存放创建出来的雪花对象；

    canvas.width = width; //设置画布的宽度为系统显示宽度;
    canvas.height = height; //设置画布的高度为系统显示高度;

    cartoon(); //调用动画;

    /**
     * 定义雪花类;
     */

    class Snowflake {
        constructor() {
            this.init(); //构造函数，调用定义好的init()方法;
        }
        init() {
            this.position = { //雪花对象的位置;
                x: Math.random() * width, //x坐标随机;
                y: Math.random() * height, //y坐标随机;
            };
            this.speed = Math.random() * 10; //雪花下落速度为0-10以内的随机数;
            this.r = Math.random() * 6; //雪花的半径为0-6以内的随机数;
            this.transparency = Math.random(); //设置雪花的透明度为随机;
            this.color = {
                r1: Math.random() * 255, //雪花颜色随机;
                g: Math.random() * 255,
                b: Math.random() * 255,
            }
        }
        draw() { //雪花绘制方法;
            this.position.y++; //y坐标每次递增1像素;
            this.transparency -= 0.01; //透明度每次递减0.01;
            if (this.transparency <= 0) { //透明度小于0，即雪花消失，重新绘制雪花;
                this.init();
            }
            context.beginPath(); //开始一个新的图形绘制;
            context.fillStyle = "rgba(" + this.color.r1 + "," + this.color.g + "," + this.color.b + "," + this
                .transparency + ")"; //根据类模型绘制圆形雪花;
            context.arc(this.position.x, this.position.y, this.r, 0, Math.PI * 2); //填充雪花的颜色;
            context.fill();
        }
    }

    for (var i = 0; i < 1000; i++) {
        var snow = new Snowflake(); //实例化1000个雪花对象;
        snowArray.push(snow); //将雪花对象添加到数组中;
    }
    // var length=snowArray.length;

    /**
     * 定义动画效果;
     * @return {[type]} [description]
     */
    function cartoon() {
        context.clearRect(0, 0, width, height); //动画完成一次进行清屏操作;
        for (var j = 0; j < snowArray.length; j++) {
            snowArray[j].draw(); //将实例化好的每个雪花对象在画布上画出来;
        }
        requestAnimationFrame(cartoon); //递归调用动画效果;
    }
</script>
</body>
</html>
